<template>
  <div
    class="tool-box-container"
    :style="{
      borderBottom: `1px solid ${themeStyle[theme].borderColor1}`,
      color: themeStyle[theme].textColor2
    }"
  >
    <div
      class="tool-box-icon"
      :style="{
        borderRight: `1px solid ${themeStyle[theme].borderColor1}`
      }"
    >
      <svg-icon name="tool" :color="themeStyle[theme].textColor1"></svg-icon>
    </div>
    <div class="tool-box-category">
      <div
        class="category-title"
        :style="{
          backgroundColor: themeStyle[theme].backgroundColor2
        }"
      >
        <div
          class="color-block"
          :style="{
            backgroundColor: themeStyle[theme].backgroundColor1,
            left: getColorBlockLeft
          }"
        ></div>
        <template v-for="(item, index) in toolBoxMenu" :key="index">
          <div class="title-item" @click="canvasToolStore.changeToolCategory(item.title)">
            <span :style="{ color: currentToolCategory === item.title ? '#0087dc' : undefined }">
              {{ item.title }}
            </span>
          </div>
        </template>
      </div>
      <div class="tool-content">
        <template v-for="(item, index) in getChildrenItem" :key="index">
          <div class="content-item" @mousedown="initToolBoxDragEvents($event, item)">
            <div class="item-icon">
              <svg-icon
                v-if="item?.icon"
                :name="item.icon"
                size="2em"
                :color="themeStyle[theme].textColor1"
              ></svg-icon>
            </div>
            <span>{{ item.name }}</span>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useStyleStore } from '@renderer/store/globalStyle/style'
import { storeToRefs } from 'pinia'
import { useCanvasToolStore } from '@renderer/store/canvas/canvasTool'
import { computed } from 'vue'
import { initToolBoxDragEvents } from '@renderer/store/canvas/canvasEvents'

const styleStore = useStyleStore()
const { theme, themeStyle } = storeToRefs(styleStore)

const canvasToolStore = useCanvasToolStore()
const { toolBoxMenu, currentToolCategory } = storeToRefs(canvasToolStore)

const getColorBlockLeft = computed(() => {
  const index = toolBoxMenu.value.findIndex((item) => item.title === currentToolCategory.value)
  return `${index * 100 + 10}px`
})
const getChildrenItem = computed(() => {
  const index = toolBoxMenu.value.findIndex((item) => item.title === currentToolCategory.value)
  return toolBoxMenu.value[index].children
})
</script>

<style scoped lang="scss">
.tool-box-container {
  width: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
  height: 70px;
  .tool-box-icon {
    height: 100%;
    width: 30px;
  }
  .tool-box-category {
    height: 100%;
    width: calc(100% - 30px);
    user-select: none;
    .category-title {
      width: calc(100% - 22px);
      height: 25px;
      padding: 0px 10px;
      font-size: $font-size-medium;
      display: flex;
      justify-content: left;
      align-items: center;
      position: relative;

      .color-block {
        position: absolute;
        height: 25px;
        width: 100px;
        top: 0px;
        transition: left 0.3s ease-in-out;
      }

      .title-item {
        text-align: center;
        width: 100px;
        z-index: 10;
      }
    }
    .tool-content {
      height: 45px;
      width: 100%;
      display: flex;
      justify-content: left;
      align-items: center;
      font-size: $font-size-small;
      .content-item {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 100px;

        .item-icon {
          width: 30px;
          height: 30px;
          border-radius: 3px;
        }
      }
    }
  }
}
</style>
